<template>
  <div class="zh-module-management">
    <div class="zh-h-search">
      <el-autocomplete
        v-model="keyword"
        popper-class="my-autocomplete"
        :fetch-suggestions="querySearchAsync"
        placeholder="输入关键字"
        @select="handleSelect"
        clearable
      >
        <template slot-scope="{ item }">
          <i><img :src="item.icon" width="14" /></i>
          <span>{{ item.txtName }}</span>
        </template>
      </el-autocomplete>
    </div>

    <el-row :gutter="20" class="content-box" v-if="isCurrent">
      <el-col
        :span="8"
        v-for="(item, index) in dashBordData.filter((item, inx) => inx < 6)"
        :key="index"
      >
        <div class="nav-carousel clear">
          <div class="img-carousel fl">
            <img :src="systemLogoSrc[item.path]" alt="" />
          </div>
          <div class="content-carousel fr">
            <div class="right-content-carousel">
              <div class="title-content">
                {{ item.txtName }}
              </div>
              <div class="list-content">
                <div
                  class="a-list"
                  v-for="item2 in item.children"
                  :key="item2.name"
                >
                  <router-link
                    :to="
                      '/' +
                      item.path +
                      '/' +
                      item2.path +
                      '/' +
                      item2.children.filter((val) => val.showLeft !== false)[0]
                        .path
                    "
                    tag="a"
                  >
                    <el-badge class="item">{{ item2.txtName }}</el-badge>
                  </router-link>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="content-box" v-else>
      <el-col
        :span="8"
        v-for="(item, index) in dashBordData.filter((item, inx) => inx > 5)"
        :key="index"
      >
        <div class="nav-carousel clear">
          <div class="img-carousel fl">
            <img :src="systemLogoSrc[item.path]" alt="" />
          </div>
          <div class="content-carousel fr">
            <div class="right-content-carousel">
              <div class="title-content">
                {{ item.txtName }}
              </div>
              <div class="list-content">
                <div
                  class="a-list"
                  v-for="item2 in item.children"
                  :key="item2.name"
                >
                  <router-link
                    :to="
                      '/' +
                      item.path +
                      '/' +
                      item2.path +
                      '/' +
                      item2.children.filter((val) => val.showLeft !== false)[0]
                        .path
                    "
                    tag="a"
                  >
                    <el-badge class="item">{{ item2.txtName }}</el-badge>
                  </router-link>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>

    <div
      class="click-left"
      @click="isCurrent = !isCurrent"
      v-if="dashBordData.length >= 7"
    >
      &lt;
    </div>
    <div
      class="click-right"
      @click="isCurrent = !isCurrent"
      v-if="dashBordData.length >= 7"
    >
      &gt;
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isCurrent: true, // 当前显示的内容
      timeout: null,
      keyword: "",
      domain: window.location.host,
      searchResultData: [],
      dashBordData: deep_clone(this.$router.options.routes[3].children),
      searchData: deep_clone(this.$router.options.routes[3].children),
      systemLogoSrc: {
        portal: "/static/image/management/portal.svg",
        user: "/static/image/management/user.svg",
        resources: "/static/image/management/resources.svg",
        teaching: "/static/image/management/teaching.svg",
        affairs: "/static/image/management/affairs.svg",
        life: "/static/image/management/life.svg",
        system: "/static/image/management/system.svg",
      },
    };
  },
  created() {
    // console.log(JSON.parse(JSON.stringify(this.dashBordData)))
    // this.$store.state.checkLevel 为真多级版则运行如下函数，为假则是单机不运行
    // this.$store.state.platformInformation 为真则是教育局 假则是学校 学校可见班级管理
    if (this.$store.state.checkLevel) {
      this.deleteData(this.dashBordData);
      this.deleteData(this.searchData);
    }
    this.resetData();
  },
  methods: {
    // 路径数据处理项---------------------------------------------------------------
    deleteData(arr) {
      arr.map((item, idx) => {
        if (
          idx === 0 &&
          sessionStorage.getItem("CheckSchoolAppCode") !==
            "00000000000000000000000000000000"
        ) {
          // console.log(item.children)
          item.children.pop();
        }
        // if(this.$store.state.platformInformation){
        // 	if(idx === 1) {
        // 		item.children.splice(1,1) // 截取班级
        // 		item.children.pop() // 截取学籍管理
        // 		item.children[2].children.splice(1,1) // 截取用户私信
        // 	}
        // 	if(idx === 2) {
        // 		item.children.pop() // 截取试题管理
        // 		item.children[1].children.splice(1,1) // 截取直播管理-预约审核
        // 		item.children[2].children.splice(2,1) // 截取资源管理-教材管理
        // 	}
        // 	if(idx === 3) {
        // 		item.children.splice(1,2) // 截取备课管理/学习统计
        // 	}
        // 	if(idx === 4) {
        // 		// console.log(JSON.parse(JSON.stringify(item.children)))
        // 		item.children.shift() // 截取请假管理
        // 		item.children.splice(2,1) // 截取课时管理
        // 		item.children.pop() // 截取素质评价
        // 		item.children.pop() // 截取学期管理
        // 		item.children[0].children.splice(1,1) // 截取AI设备路径
        // 		item.children[2].children.splice(1,1) // 截取名师审核路径
        // 	}
        // }
      });
    },
    // 数据处理项--------------------------------------------------------------------

    querySearchAsync(queryString, cb) {
      let restaurants = this.searchResultData;
      let results = queryString
        ? restaurants.filter(this.createStateFilter(queryString))
        : restaurants;

      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        cb(results);
      }, 1500 * Math.random());
    },
    createStateFilter(queryString) {
      return (state) => {
        return (
          state.txtName.toLowerCase().indexOf(queryString.toLowerCase()) > -1
        );
      };
    },
    resetData() {
      /*合并出菜单数组*/
      this.searchResultData = [];
      this.searchData.forEach((item, index) => {
        if (item.children) {
          item.children.forEach((item2, index2) => {
            if (item2.showLeft !== false && item2.txtName) {
              item2.icon = "/static/image/dir.png";
              item2.orignPath = "/" + item.path + "/" + item2.path;
              item2.path =
                "/" +
                item.path +
                "/" +
                item2.path +
                "/" +
                item2.children.filter((val) => val.showLeft !== false)[0].path;
              this.searchResultData.push(item2);
            }

            if (item2.children) {
              item2.children.forEach((item3, index3) => {
                if (item3.showLeft !== false && item3.txtName) {
                  item3.icon = "/static/image/file.png";
                  item3.path = item2.orignPath + "/" + item3.path;
                  this.searchResultData.push(item3);
                }
              });
            }
          });
        }
      });
    },
    handleSelect(item) {
      this.$router.push(item.path);
    },
  },
};
</script>
<style lang="scss">
.zh-home {
  min-width: 1220px;
}

.zh-h-manage {
  position: relative;
  height: calc(100% - 160px);
}

.zh-module-management {
  max-width: 1200px;
  margin: 0 auto;
  // position: relative;

  .click-left,
  .click-right {
    position: absolute;
    top: 50%;
    width: 60px;
    height: 80px;
    line-height: 80px;
    border-radius: 3px;
    font-size: 40px;
    font-family: monospace;
    font-weight: 700;
    text-align: center;
    color: #666666;
    background: #fff;
    opacity: 0.9;
    cursor: pointer;
    &:hover {
      opacity: 0.8;
      color: #409eff;
    }
  }
  .hide {
    cursor: not-allowed;
  }
  .click-left {
    left: 2%;
  }
  .click-right {
    right: 2%;
  }

  .zh-h-search {
    margin-bottom: 50px;
    text-align: center;
    .el-autocomplete {
      width: 500px;
      .el-input__inner {
        height: 50px;
        line-height: 50px;
        color: #fff;
        border-radius: 50px;
        border-color: #fff;
        padding: 0 50px 0 30px;
        background: rgba(255, 255, 255, 0.17);
      }
      ::-moz-placeholder {
        color: #fff;
      }
      ::-webkit-input-placeholder {
        color: #fff;
      }
      ::-ms-input-placeholder {
        color: #fff;
      }
    }
  }
  .el-col {
    margin-bottom: 20px;
  }

  .content-box {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
  }

  .nav-carousel {
    height: 240px;
    min-width: 387px;
    background-color: #fff;
    border-radius: 4px;

    .img-carousel {
      width: 40%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      img {
        // width: 100%;
        // height: 100%;
        // border-top-left-radius: 4px;
        // border-bottom-left-radius: 4px;
      }
    }
    .content-carousel {
      width: 60%;
      height: 100%;
      .right-content-carousel {
        margin-left: 21%;
        .title-content {
          height: 80px;
          line-height: 80px;
          font-size: 20px;
          font-weight: 800;
        }
        .list-content {
          height: 145px;
          overflow: auto;
          .a-list {
            margin-bottom: 8px;
            .el-badge__content.is-fixed.is-dot {
              right: -2px;
              top: 2px;
            }
          }
        }
      }
    }
  }
}
.my-autocomplete li {
  line-height: 0;
  i {
    display: inline-block;
    height: 34px;
    line-height: 34px;
    img {
      vertical-align: middle;
    }
  }
  span {
    display: inline-block;
    height: 34px;
    line-height: 34px;
    vertical-align: middle;
  }
}
</style>
